<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输权限名称" clearable v-model="permissionName" @clear="searchPermission">
                        <el-button slot="append" icon="el-icon-search" @click="searchPermission"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="showAddDialog">添加权限</el-button>
                </el-col>
            </el-row>
            <el-table :data="permissionList" border stripe>
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="权限名称" prop="permissionName"></el-table-column>
                <el-table-column label="权限路径" prop="url"></el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removePermissionById(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10 , 15, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>

        <el-dialog title="新增权限" :visible.sync="dialogFormVisible">
            <el-form ref="permissionForm" :model="permissionForm" :visible.sync="dialogFormVisible" :label-width="formLableWidth">
                <el-form-item label="权限名称">
                    <el-input v-model="permissionForm.permissionName"></el-input>
                </el-form-item>

                <el-form-item label="权限路径">
                    <el-input v-model="permissionForm.url"></el-input>
                </el-form-item>


                <el-form-item label="父级菜单">
                    <el-select v-model="permissionForm.parentId" placeholder="请选择父级菜单" style="width: 100%">
                        <el-option
                                v-for="item in parents"
                                :key="item.id"
                                :label="item.permissionName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>


            <span slot="footer" class="dialog-fotter">
                   <el-button type="primary" @click="saveOrUpdate">确定</el-button>
                    <el-button @click="cancelForm">取消</el-button>
               </span>
        </el-dialog>

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                permissionList: [],
                total: 0,
                permissionName: "", //权限名称
                dialogFormVisible: false,
                formLableWidth: "120px",
                permissionForm: {},
                parents: []
            };
        },
        methods: {
            handleSizeChange(val){
                this.pageSize = val;
                this.reloadData();
            },
            handleCurrentChange(val){
                this.pageNum = val
                this.reloadData();
            },
            searchPermission(){
                this.reloadData();
            },
            showAddDialog() {
                this.permissionForm = {};
                this.dialogFormVisible = true;
                this.reloadFirstLevelMenu();
            },
            reloadFirstLevelMenu() {
                this.$axios.get("/permissionHs/findFirstLevelMenu").then(resp => {
                    this.parents = resp.data.data;
                })
            },
            saveOrUpdate() {
                this.$axios.post("/permissionHs/saveOrUpdate",this.permissionForm).then(resp => {
                    if (resp.data.code == 200) {
                        this.$message.success("操作成功");
                        this.reloadData();
                        this.dialogFormVisible = false;
                    }
                })
            },
            cancelForm() {

            },
            showEditDialog(row){
                let temp = {};
                Object.assign(temp,row);
                this.permissionForm = temp;
                console.log("this.permissionForm",this.permissionForm)
                if (this.permissionForm.parentId == -1) {
                    this.permissionForm.parentId = "";
                }
                this.dialogFormVisible = true;
                this.reloadFirstLevelMenu();
            },
            removePermissionById(row){
                this.$confirm(`此操作将永久删除该权限信息：${row.name}, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(`/permissionHs/delete?id=${row.id}`).then(resp => {
                        if (resp.data.code == 200) {
                            this.$message.success(`删除权限记录成功：${row.name}的信息`);
                        } else {
                            this.$message.error(`删除权限记录失败`);
                        }
                        this.reloadData();
                    });
                }).catch(() => {

                });
            },
            reloadData(){
                this.$axios.get("/permissionHs/findAll",{
                    params:{
                        pageNum: this.pageNum,
                        pageSize: this.pageSize,
                        permissionName: this.permissionName
                    }
                }).then(resp => {
                    this.total = resp.data.data.total;
                    this.permissionList = resp.data.data.records;
                })
            }
        },
        created() {
            this.reloadData();
        }
    };
</script>
<style lang="less" scoped>
</style>